<template>
  <el-dialog title="新增企业" :visible.sync="isShow" width="50%">
    <el-form
      @close="$emit('hideDialog')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :model="addCompanyForm"
      :rules="addCompanyRules"
      ref="addCompanyRef"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="企业简称" prop="shortName">
        <el-input v-model="addCompanyForm.shortName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否名企" prop="isFamous">
        <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
        <el-checkbox label="" name="type" v-model="addCompanyForm.isFamous"></el-checkbox>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="addCompanyForm.company" placeholder="请输入"></el-input>
      </el-form-item>
      <!-- 省 -->
      <el-form-item label="城市" prop="province">
        <el-select v-model="addCompanyForm.province" placeholder="请选择" @change="handleProvince">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in citySelect.province"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 市 -->
      <el-form-item label="" prop="city">
        <el-select prop="city" v-model="addCompanyForm.city" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in citySelect.cityDate"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="addCompanyForm.tags" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" v-model="addCompanyForm.remarks"></el-input>
      </el-form-item>
      <el-form-item class="right">
        <el-button @click="$emit('hideDialog')">取 消</el-button>
        <el-button type="primary" @click="addCompany(addCompanyForm)">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, detail, add } from '@/api/hmmm/companys'
export default {
  name: 'dialogIndex',
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    citySelect: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 新增表单
      addCompanyForm: {
        shortName: '',
        isFamous: false,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      addCompanyRules: {
        shortName: [
          { required: true, message: '请输入企业简称', trigger: 'blur' }
        ],
        tags: [{ required: true, message: '请输入企业标签', trigger: 'blur' }],
        province: [
          {
            required: true,
            message: '请选择省份',
            trigger: 'change'
          }
        ],
        city: [
          {
            required: true,
            message: '请选择市',
            trigger: 'change'
          }
        ]
      }
    }
  },

  methods: {
    // 添加功能
    addCompany(val) {
      console.log(val)
      this.$refs.addCompanyRef.validate(async valid => {
        // console.log(valid)
        if (valid) {
          const { data } = await add(val)
          this.$message.success('添加成功')
          // 隐藏添加对话框
          this.$emit('hideDialog')
          // 刷新列表
          this.$emit('getRefresh')
        }
      })
      // console.log(this.$refs.addCompanyRef)
      // const { data } = await add(val)
      // console.log(data)
    },
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e)
      console.log(this.citySelect.cityDate)
      this.addCompanyForm.city = this.citySelect.cityDate[0]
    }
  },
  created() {}
}
</script>

<style scoped lang='less'>
.el-dialog {
  .el-form {
    .right {
      // float: right;
    }
    .el-dialog__body {
      padding-bottom: 50px;
    }
  }
}
</style>
